<style lang="scss" scoped>
  .star-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 1111111;
    background-color: #25455d;

    .imgClass {
      position: absolute;
      top: 20%;
      left: 35%;
      width: 237px;
      height: 319px;
    }
  }

  #space {
    width: 100%
  }

  .closeCot {
    position: absolute;
    top: 28px;
    right: 20px;
    height: 90px;
    width: 120px;
    text-align: center;

    > div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 56px;
      height: 40px;
      text-align: center;
      font-size: 24px;
      color: #fff;
    }

    > canvas {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .star-text {
    color: #fff;
    font-size: 0.32rem;
    z-index: 11111111;
    position: absolute;
    bottom: 5%;
    left: 25%;
  }
</style>

<template>
  <div class="star-container">
    <canvas id="space" width="400" height="800"></canvas>
    <img src="../../../assets/smartpic/smarteye.png" class="imgClass" alt="">
    <div class="star-text">copyright ©2018 美的集团IoT公司</div>
    <!--退出按钮-->
    <div class="closeCot" @click.stop="closeCot">
      <canvas id="closeCanvas" width="45" height="45"></canvas>
      <div>
        跳过
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isTodayFirst: true,
      showStartPage: true
    }
  },
  mounted() {
    // based on an Example by @curran
    window.requestAnimFrame = (function () {
      return window.requestAnimationFrame
    })()
    var canvas = document.getElementById('space')
    var c = canvas.getContext('2d')

    var numStars = 1900
    var radius = '0.' + Math.floor(Math.random() * 9) + 1
    var focalLength = canvas.width * 2
    var warp = 0
    var centerX, centerY

    var stars = [], star
    var i

    var animate = true

    initializeStars()

    function executeFrame() {
      if (animate) {
        requestAnimFrame(executeFrame)
      }
      moveStars()
      drawStars()
    }

    function initializeStars() {
      centerX = canvas.width / 2
      centerY = canvas.height / 2

      stars = []
      for (i = 0; i < numStars; i++) {
        star = {
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          z: Math.random() * canvas.width,
          o: '0.' + Math.floor(Math.random() * 99) + 1
        }
        stars.push(star)
      }
    }

    function moveStars() {
      for (i = 0; i < numStars; i++) {
        star = stars[i]
        star.z--

        if (star.z <= 0) {
          star.z = canvas.width
        }
      }
    }

    function drawStars() {
      var pixelX, pixelY, pixelRadius

      // Resize to the screen
      if (canvas.width != window.innerWidth || canvas.width != window.innerWidth) {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        initializeStars()
      }
      if (warp == 0) {
        c.fillStyle = 'rgba(0,10,20,1)'
        c.fillRect(0, 0, canvas.width, canvas.height)
      }
      c.fillStyle = 'rgba(209, 255, 255, ' + radius + ')'
      for (i = 0; i < numStars; i++) {
        star = stars[i]

        pixelX = (star.x - centerX) * (focalLength / star.z)
        pixelX += centerX
        pixelY = (star.y - centerY) * (focalLength / star.z)
        pixelY += centerY
        pixelRadius = 1 * (focalLength / star.z)

        c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius)
        c.fillStyle = 'rgba(209, 255, 255, ' + star.o + ')'
        // c.fill();
      }
    }

    //   关闭特效canvas
    var drawCricle = function () {
      var closeCanvas = document.getElementById('closeCanvas'), // 获取canvas元素
        context = closeCanvas.getContext('2d'), // 获取画图环境，指明为2d
        centerX = closeCanvas.width / 2, // Canvas中心点x轴坐标
        centerY = closeCanvas.height / 2, // Canvas中心点y轴坐标
        rad = Math.PI * 2 / 100, // 将360度分成100份，那么每一份就是rad度
        speed = 0.1 // 加载的快慢就靠它了

        // 绘制5像素宽的运动外圈
      function blueCircle(n) {
        context.save()
        context.strokeStyle = '#fff' // 设置描边样式
        context.lineWidth = 3 // 设置线宽
        context.beginPath() // 路径开始
        context.arc(centerX, centerY, 20, -Math.PI / 2, -Math.PI / 2 + n * rad, false) // 用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context.stroke() // 绘制
        context.closePath() // 路径结束
        context.restore()
      }

      // 百分比文字绘制
      function text(n) {
      }

      // 绘制白色外圈
      function whiteCircle() {
        context.save()
        context.beginPath()
        context.lineWidth = 2 // 设置线宽
        context.strokeStyle = 'gray'
        context.arc(centerX, centerY, 20, 0, Math.PI * 2, false)
        context.stroke()
        context.closePath()
        context.restore()
      }

      // 动画循环
      (function drawFrame() {
        window.requestAnimationFrame(drawFrame)
        context.clearRect(0, 0, closeCanvas.width, closeCanvas.height)
        whiteCircle()
        text(speed)
        blueCircle(speed)
        if (speed > 100) speed = 100
        speed += 0.6
      }())
    }

    // 执行动画
    executeFrame()
    // 关闭动销执行
    drawCricle()
    // 定时关闭
    setTimeout(() => {
      this.closeCot()
    }, 3000)
  },
  methods: {
    // 关闭按钮
    closeCot() {
      this.$emit('closeStartPage')
    }
  }
}

</script>
